﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .box {
            width:100px;
            height:100px;
            background-color:#00ff00;
            position:fixed;
        }
    </style>
    <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $(".box").hover(function () {
                    var top = parseInt(Math.random() * 500);
                    var left = parseInt(Math.random() * 500);
                    $(".box").animate({
                        left: left + 'px',
                        top: top + 'px'
                    }
                        );

                });
            }
            );
    </script>
</head>
<body>
    <div class="box">容器</div>
</body>
</html>
